import React, { Component } from 'react';
import styles from './index.less';
import Maptoolbar from './maptoolbar';
import MaptoolContent from './MaptoolContent';
import LeftNavBar from './leftNavBar';
import { useSelector, useDispatch } from 'umi';

// import { connect } from 'dva';
// import cls from 'classnames';

// function gotoMonitor() {
//   let urlArr = window.location.pathname.split('/');
//   urlArr.pop();
//   urlArr.push(
//     'monitorPage.html?token=' +
//       sessionStorage.getItem('token') +
//       '&userName=' +
//       sessionStorage.getItem('userName'),
//   );
//   window.open(urlArr.join('/'));
// }

// const ProjTopToolbar = ({ dispatch, isGlobalProcessRender, compareState }) => {
const ProjTopToolbar = () => {
  const isFullScreen = useSelector(s => s.app.isFullScreen);
  const dispatch = useDispatch();
  function handleFullScreenToggle() {
    dispatch({
      type: 'app/updateState',
      payload: {
        isFullScreen: !isFullScreen,
      },
    });
  }
  return (
    <>
      <div style={{ visibility: isFullScreen ? 'hidden' : 'visible' }}>
        <LeftNavBar />
        <div className={styles.projTopToolbar}>
          <Maptoolbar />
        </div>
        <MaptoolContent />
      </div>
      <div
        onClick={handleFullScreenToggle}
        style={{
          position: 'fixed',
          right: 24,
          bottom: 24,
          display: !isFullScreen ? 'none' : 'flex',
          width: 40,
          height: 40,
          background:
            'linear-gradient(135deg, rgba(19, 27, 32, 0.85) 0%, rgba(9, 18, 24, 0.85) 100%)',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <img src={require('../images/全屏.png')} alt="" srcSet="" />
      </div>
    </>
  );
};

export default ProjTopToolbar;
